<template>
	<div class="words-item-list fycjyc">
		<div class="words-item" v-for="(item, index) in props.data" :key="index">
			<div class="word">
				<Words :text="item" :size="size" :border-draw="false" />
			</div>
			<div>
				<Words :text="answetResult(index, item)" :size="size" :showInput="false" blank :blank-length="1" />
			</div> 
		</div>
	</div> 
</template>

<script setup>
import { ref } from "vue"
import Words from "@/components/words/index.vue"
import Props from "../props.js"
const props = defineProps({
	...Props,
	size: {
		type: Number,
		default: 7
	}
})
const emit = defineEmits(['answer'])
const answetResult = (index, item) => {
	if(props.result[index]) {
		return props.result?.[index]
	}else{
		if(props.showInput) { return '' }
		const arr = []
		for(let i = 0; i < item.length; i++) { arr.push('') }
		return arr
	}
}
</script>
<style lang="scss" scoped>
@import "@/styles/var.scss";

.words-item-list {
	display: flex;
	flex-wrap: wrap;
	color: $gray-ligh-3;
	position: relative;
	.words-item {
		margin-bottom: 2.8rem;
		width: 50%;
		font-size: 3.2rem;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		.word {
			color: $primary-text;
		}
	}
}
</style>